<script setup lang="ts">

import { computed, ref ,watch} from 'vue';

// 定义水果对象的类型
interface Fruit {
  id: number
  icon: string
  isChecked: boolean
  num: number
  price: number
}

const ListKey='cartList'
//水果列表
const res=localStorage.getItem(ListKey)
let list:Fruit[]=[]

//如果为空就设置为初始值
if(res===null){
  list=[
    {
      id: 1,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
      isChecked: true,
      num: 2,
      price: 6
    },
    {
      id: 2,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
      isChecked: false,
      num: 7,
      price: 20
    },
    {
      id: 3,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
      isChecked: false,
      num: 3,
      price: 40
    },
    {
      id: 4,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
      isChecked: false,
      num: 10,
      price: 3
    },
    {
      id: 5,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
      isChecked: false,
      num: 20,
      price: 34
    }
  ]
}else{
  list=JSON.parse(res)
}

const fruitList=ref<Fruit[]>(list)

//侦听器  将数据同步到LocalStorage里面
watch(
  fruitList,
  ()=>{
localStorage.setItem(ListKey,JSON.stringify(fruitList.value))
  },
  {
    deep:true
  }
)


//点击空购物车 还原数据
const resetData=()=>{
  //重新赋值
  fruitList.value=[
    {
      id: 1,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
      isChecked: true,
      num: 2,
      price: 30
    },
    {
      id: 2,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
      isChecked: false,
      num: 7,
      price: 20
    },
    {
      id: 3,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
      isChecked: false,
      num: 3,
      price: 40
    },
    {
      id: 4,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
      isChecked: false,
      num: 10,
      price: 3
    },
    {
      id: 5,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
      isChecked: false,
      num: 20,
      price: 6
    }
  ]
}


//点击实现删除
const del=(id:number)=>{
fruitList.value=fruitList.value.filter(v=>v.id!==id)
}
//添加水果

//添加数量
const Add=(id:number)=>{
//根据id 找到元素累加
const res=fruitList.value.find(v=>v.id===id)
res!.num++

}
//减少数量
const sub=(id:number)=>{

  //根据id 找到元素递减
const res=fruitList.value.find(v=>v.id===id)
//如果数量<=1的话就不再递减
if(res!.num<=1){
  return 
}
res!.num--
}


//实现全选和反选
//使用Computed的完整写法
const  isAll=computed({
get(){
  //判断每一项是不是都被选中
return fruitList.value.every(v=>v.isChecked)

},
  set(value){
    //基于拿到的value的状态,来让所有的checkbox同步
    return  fruitList.value.forEach(v=>v.isChecked=value)
  }

})


//统计总价
const totalPrice=computed(()=>{
  //过滤出选中的元素
  const res=fruitList.value.filter(v=>v.isChecked)
  //计算总价
  return res.reduce((pre,cur)=>pre+cur.num*cur.price,0)
})

//统计选中的数量
const totalNum=computed(()=>{
  //过滤出选中的元素
  const res=fruitList.value.filter(v=>v.isChecked)
  //计算个数
  return res.reduce((pre,cur)=>pre+cur.num,0)
})




</script>

<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div v-if="fruitList.length>0"   class="main">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div v-for="item in fruitList" :key="item.id" class="tr active">
            <div class="td"><input type="checkbox" checked v-model="item.isChecked"/></div>
            <div class="td"><img :src="item.icon" alt="" /></div>
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <div class="my-input-number">
                <button  class="decrease" @click="sub(item.id)"> - </button>
                <span class="my-input__inner">{{ item.num }}</span>
                <button class="increase" @click="Add(item.id)"> + </button>
              </div>
            </div>
            <div class="td">{{  item.num*item.price}}</div>
            <div @click="del(item.id)" class="td"><button>删除</button></div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input type="checkbox" v-model="isAll" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span>
          <!-- 结算按钮 -->
          <button class="pay">结算( {{  totalNum}} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div @click="resetData" v-else class="empty" >🛒空空如也</div>
  </div>
</template>

<style scoped>
@import './style/inputnumber.css';
@import './style/index.css';
</style>